<template>
    <el-dialog v-model="state.dialogFormVisible" :title="title" width="800px" destroy-on-close center>
        <el-container>
            <el-main>
                <div class="content" v-html="valueHtml"></div>
            </el-main>
        </el-container>
    </el-dialog>
</template>

<script lang="ts" setup>
import {
    onBeforeUnmount,
    ref,
    reactive
} from 'vue'
import { bus } from "@/utils/mitt.js"
import { getOnePolicy } from '@/api/setting.js'
//标题
const title = ref()
// 内容 HTML
const valueHtml = ref()
bus.on("introduce", async (id: number) => {
    if (id == 1) {
        title.value = '奖学金相关政策'
        const res = await getOnePolicy('奖学金相关政策')
        valueHtml.value = res.data.results[0].set_text
    }
    if (id == 2) {
        title.value = '奖学金申请通告'
        const res = await getOnePolicy('奖学金申请通告')
        valueHtml.value = res.data.results[0].set_text
    }
    if (id == 3) {
        title.value = '助学金相关政策'
        const res = await getOnePolicy('助学金相关政策')
        valueHtml.value = res.data.results[0].set_text
    }
    if (id == 4) {
        title.value = '助学金申请通告'
        const res = await getOnePolicy('助学金申请通告')
        valueHtml.value = res.data.results[0].set_text
    }
})

// 状态
const state = reactive({
    dialogFormVisible: false,
});

// 暴露open方法
const open = () => {
    state.dialogFormVisible = true;
};
defineExpose({
    open,
});

// 取消订阅/监听
onBeforeUnmount(() => {
    bus.all.clear()
})
</script>
<style scoped lang="scss">
.content {
    text-align: center;
}
:deep(.el-main){
    min-height: 300px;
}
</style>